<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>主页</title>
  <link rel="stylesheet" href="static/css/mainPage.css"/>
  <link rel="stylesheet" href="static/css/common.css"/>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet">
  <link rel="stylesheet" href="static/css/font-awesome.min.css">
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script> -->
  <script src="static/js/jquery-3.4.1.min.js"></script>
  <script src="static/js/jsencrypt.min.js"></script>
  <script src="static/js/axios.js"></script>
</head>
<body>
<div id="app">
 <t_header :user_name="a_user_name" :is_login="is_login"></t_header>
  <div id="img" style="margin-top: 80px;">
    <img src="static/image/head_2.jpg">
  </div>
  <div class="located bgc-l-gray" style="width: 80%;height: 200px;margin: 0 auto;margin-top: 10px;">
    <div id="recommend" class="float">
      <t_head :head_name="'特别推荐'" :index="0"></t_head>
      <div class="classes" style="overflow: hidden; margin-top: 0">
        <t_class v-for="(e, index) in recommend_classes" :class_id="e.class_id" :class_cover="e.class_cover"
                 :class_name="e.class_name" :key="e + index"></t_class>
      </div>
    </div>
    <div id="announcement" class="float">
      <t_head :head_name="'通知公告'" :index="1"></t_head>
      <div class="notices">
        <t_notice v-for="(e, index) in announcement" :notice_id="e.notice_id" :index="index + 1"
                  :notice_name="e.notice_name" :key="e + index"></t_notice>
      </div>
    </div>
  </div>
  <div class="located" style="width: 80%;height: 500px;margin: 0 auto;margin-top: 10px;">
    <div id="all" class="float">
      <t_head :head_name="'所有课程'" :index="2"></t_head>
      <div class="classes" v-for="(e, index) in all_classes" :key="e + index">
        <t_class v-for="(i, k) in e" :class_id="i.class_id" :class_cover="i.class_cover"
                 :class_name="i.class_name" :key="i + k"></t_class>
      </div>
    </div>
    <div id="list" class="float">
      <t_head :head_name="'排行榜'" :index="3"></t_head>
      <div class="ranks">
        <t_rank v-for="(e, index) in rank_classes" :class_id="e.class_id" :index="index + 1" :class_name="e.class_name"
                :key="e + index"
        ></t_rank>
      </div>
    </div>
  </div>
</div>
<template id="header_temp">
  <div id="header" class="located font-20">
    <div id="header_left" class="flow">
      <table cellspacing="0" cellpadding="0" style="height: 80px;">
        <tr>
          <td><div class="table_cell bgc-d-blue" @click="to_main_page"><a href="javascript:void(0)"
                                                                          class="bgc-black">首页</a></div></td>
          <td><div class="table_cell"><a href="javascript:void(0)" class="bgc-black">我的课程</a></div></td>
          <td><div class="table_cell"><a href="javascript:void(0)" class="bgc-black">社区</a></div></td>
        </tr>
      </table>
    </div>
    <div id="header_right" class="flow">
      <table cellspacing="0" cellpadding="0" style="height: 80px;">
        <tr>
          <td><div class="table_cell"
                   @click="to_action"><a href="javascript:void(0)" class="bgc-black">{{user_name}}</a></div></td>
          <td v-if="is_login"><div class="table_cell" @click="to_action"><a href="javascript:void(0)"
                                                                           class="bgc-black"><i
                  class="fa fa-cog fa-fw"></i>我的</a></div></td>
        </tr>
      </table>
    </div>
  </div>
</template>
<template id="class_temp">
  <div class="class" @click.self.stop="to_over_view">
    <div><img :src="class_cover"/></div>
    <div>{{class_name}}</div>
  </div>
</template>
<template id="notice_temp">
  <div class="notice font-20">
    <a href="javascript:void(0)" @click="show_notice">{{my_name}}</a>
  </div>
</template>
<template id="rank_temp">
  <div class="rank font-20 float" @click="to_over_view">
    <label>{{index}}</label>
    <a href="javascript:void(0)">{{class_name}}</a>
  </div>
</template>
<template id="head_temp">
  <div class="head located">
    <div class="divider flow bgc-l-blue-2"></div>
    <label class="color-black flow font-20" style="left: 30px;height: 40px;top: 50%;transform: translateY(-50%);">{{head_name}}</label>
    <div class="flow font-20 more bgc-d-gray-1 border-5" style="right: 12px;" @click="to_more">
      <a href="javascript:void(0)" class="full">更多</a>
    </div>
  </div>
</template>
<script src="static/js/vue.js"></script>
<script src="static/js/mainPage.js"></script>
<div id="foot"></div>
</body>
</html>